很常聽到前後端在講一些關於部署上線的專有詞彙，今天想把這些詞彙定義整理起來。

本機開發程式碼專案→打包→部署上線

我在 Nuxt 或 Vue 專案裡寫了很多東西：

• pages/：分頁結構
• components/：元件
• .vue 檔案（含 template + script + style）
• 圖片、SCSS、第三方套件（Vuetify, MDI icons 等）

這些東西瀏覽器是不能直接執行的。所以打包器會做這些事：

純前端打包部署上線

Nuxt → build → deploy → GitHub Pages / Vercel

用 Nuxt 打包前端程式碼（npx nuxi generate 或 npm run generate），產生 .output/public 靜態檔，上傳到 GitHub Pages 即可上線。

又或者使用 Vercel / Netlify ，平台會在雲端自動執行 npm install . npm run build ，並將.output/public 或 /dist 資料夾部署上線。開發者只要 push 到 GitHub，系統就會自動偵測更新並重新部署。

Vercel 是什麼？

⇒ Vercel 是「自動容器化」的雲平台，可以自動打包和部署上線。

因為我的作品集是純前端網站、第三方服務Api串接（EmailJs. Github Api)、無需多人開發或環境測試，所以用以上方式打包、部署上線。

但是當專案有後端Api、資料庫、多人協作、或多測試環境時，就得依靠 Docker 等工具來打包、部署上線。

Docker 是什麼？

Docker 會把我的「整個程式系統 + 執行環境」打包成一個可攜的容器（container image），這個容器裡面包含：

• 系統環境（Linux）
• Node.js 版本
• 你的專案程式
• npm 套件
• 啟動方式（例如：npm run start）

⇒ Docker 是「打包環境與程式」的工具，目的是確保在多人協作時，同一包程式碼在不同電腦環境下執行，都保有一樣的行為和效果。

Docker 運作～部署容器到雲端伺服器

Dockerfile →（docker build）→ Image →（run）→ Container

• 手動建置 Dockerfile，描述「從哪個環境開始、要做哪些步驟、怎麼啟動程式」，會依據這邊的內容生成 Image
• Image 像是一個模板，會用 Image 建置出一個/多個可攜的 Container

可以選擇以下工具：

• Vercel / Netlify：自動打包，不需要 Docker （這次的作品集專案）
• Cloud Run / ECS / Azure App Service / Render：直接吃你的 Docker image
• 自架伺服器（例如 Ubuntu）：用 Docker Compose 直接跑起來

實際流程：

1. 你寫好 程式碼 + Dockerfile。
2. Cloud Build 依照 cloudbuild.yaml去跑 docker build，生出 Image。
3. 這個 Image 被放到 Container Registry / Artifact Registry。
4. Cloud Run 從 Image 啟動 Container，部署上線，對外提供服務

因為作品集網站僅關乎到前端，所以用 Vercel 部署；但實務上，在進行多人協作，需整合後端資料庫的情況下，會用 Docker 來確保開發與生產環境一致，確保服務穩定且可快速重建。